<template>
    <view class="components-price-info">
        <view :class="priceInfoClass">
            <view v-if="showInfoCategory" :class="contentClass" >
                <!--<base-single v-for="(item, index) in params" v-if="data[item.key] && data[item.key] !== ''" :baseClass="rowClass(item.baseClass)" :labelIcon="item.labelIcon"
                             :labelClass="labelClass(item.labelClass)" :valueClass="valueClass(item.valueClass)"
                             :key="item.label" :param="item" :data="data" :type="inputType(item.text)">
                    <view slot="labelSlot" v-if="needLabelSlot(item.needLabelSlot)"><slot :name="'labelSlot' + index"></slot></view>
                    <view :class="valueClass(item.valueClass)" slot="valueSlot" v-if="needValueSlot(item.needValueSlot)">
                        <slot :name="'valueSlot' + index"></slot>
                    </view>
                </base-single>-->
                <base-single v-for="(item, index) in params" v-if="(data[item.key] && data[item.key] !== '') || item.showLabel"
                             :baseClass="item.baseClass ? item.baseClass : rowClass"
                             :labelIcon="item.labelIcon"
                             :labelClass="item.labelClass ? item.labelClass : labelClass" :valueClass="item.valueClass ? item.valueClass : valueClass"
                             :key="item.label" :param="item" :data="data" :type="inputType" @onClick="onClick">
                    <!--<view slot="labelSlot" v-if="needLabelSlot(item.needLabelSlot)"><slot :name="'labelSlot' + index"></slot></view>
                    <view :class="valueClass(item.valueClass)" slot="valueSlot" v-if="needValueSlot(item.needValueSlot)">
                        <slot :name="'valueSlot' + index"></slot>
                    </view>-->
                </base-single>
            </view>
            <view v-if="showOption" :class="optionClass" @tap="optionClick" >
                <image v-if="option.icon && option.icon !== ''" class="icon" :src="option.icon"></image>
                <text v-if="option.label && option.label !== ''" :class="optionLabelClass">{{option.label}}</text>
                <view v-if="option.tipPoint && data.isRead" class="option-class-dot"></view>
            </view>
        </view>

    </view>

</template>
<script type="text/ecmascript-6">
    import BaseSingle from '@/components/ibs/baseSingle.vue';
    import validate from '@/common/graceChecker.js';
    export default {
        components: {
            BaseSingle
        },
        props: {
            categoryClass: Array, // 分类信息展示的样式
            categoryTitle: {
                type: String,
                default: ''
            },
            params: {
                type: Array,
                default() {
                    return [{
                        type: 'text',  // input框的类型
                        label: '', // 标签显示的文字
                        isInput: false, // 是否可输入
                        placeholder: '', // 输入框的提示文字
                        delimiter: '：', // 标签和内容的间隔符
                        key: '', // 内容的字段名
                        baseClass: [], // 子组件的基本样式
                        labelClass: [], // 标签的样式
                        valueClass: [], // 内容样式
                        isShowValue: false,
                        needLabelSlot: false, // label slot
                        needValueSlot: false // value slot
                    }];
                }
            },
            option: {
                type: Object,
                default: {
                    icon: '',
                    label: ''
                }
            },
            titleClass: {
                type: Array,
                default() {
                    return ['title'];
                }
            }, // 分类项标题的样式
            contentClass: {
                type: Array,
                default() {
                    return ['default-content-class'];
                }
            }, // 分类项整体内容的样式
            data: Object
        },
        data() {
            return {};
        },
        computed: {
            // 报价信息的显示样式
            priceInfoClass() {
                let categoryClass = ['flex-align-items'];
                // 判断副组件是否有传递样式过来
                categoryClass = this.categoryClass && this.categoryClass.length > 0 ? categoryClass.concat(this.categoryClass) : categoryClass.concat(['padding-0-10']);
                return categoryClass;
            },
            // 每一行显示的样式
            rowClass() {
                return ['default-base-single'];
                // uni-app 不支持计算属性函数
                /*return function (val) {
                    console.log('rowClass function: ' + val);
                    return val && val.length > 0 ? val : ['base'];
                };*/
            },
            // label显示的样式
            labelClass() {
                return ['default-label-class'];
                // uni-app 不支持计算属性函数
                /*return function (val) {
                    return val && val.length > 0 ? val : ['defalut-label-class'];
                };*/
            },
            // value显示的样式
            valueClass() {
                return ['default-value-class'];
                // uni-app 不支持计算属性函数
                /*return function (val) {
                    return val && val.length > 0 ? val : ['defalut-value-class'];
                };*/
            },
            // 判断label是否需要用slot
            needLabelSlot(val) {
                return function (val) {
                    return val;
                };
            },
            // 判断value是否需要用slot
            needValueSlot(val) {
                return function (val) {
                    return val;
                };
            },
            // 输入框的输入类型
            inputType() {
                return 'text';
                // uni-app 不支持计算属性函数
                /*return function (val) {
                    return val && val.length > 0 ? val : 'text';
                };*/
            },
            // 判断分类信息是否显示，如果内容为空则不展示
            showInfoCategory() {
                let show = false;
                let len = this.params.length;
                for (let i = 0; i < len; i++) {
                    if (!validate.stringIsNullOrEmpty(this.data[this.params[i].key]) || this.params[i].showLabel) {
                        show = true;
                        break;
                    }
                }
                // console.log('show: ' + show);
                return show;
            },
            // 根据组件需要展示的内容判断组件显示还是不显示，如果内容为空则不展示
            showInfo(val) {
                return function (val) {
                    console.log('showInfo: ' + !validate.stringIsNullOrEmpty(val) + ' val: ' + val);
                    return !validate.stringIsNullOrEmpty(val);
                };
            },
            // 判断是否显示操作按钮
            showOption() {
                // console.log('showOption: ' + JSON.stringify(this.option));
                let show = false;
                let len = this.params.length;
                for (let i = 0; i < len; i++) {
                    if (!validate.stringIsNullOrEmpty(this.data[this.params[i].key]) && this.data[this.params[i].key] != '-') {
                        show = true;
                        break;
                    }
                }
                return (!validate.stringIsNullOrEmpty(this.option.icon)  || !validate.stringIsNullOrEmpty(this.option.label)) && show;
            },
            // 操作UI显示的样式
            optionClass() {
                return this.option.optionClass ? this.option.optionClass : ['flex-align-items', 'default-view-price']
            },
            optionLabelClass() {
                return this.option.labelClass ? this.option.labelClass : ['default-option-label']
            }
        },
        methods: {
            getClass: function (val, defaultClass) {
                return val && val.length > 0 ? val : defaultClass;
            },
            /**
             * 点击事件回调函数
             * @param data 被点击组件的数据
             * @param param 被点击组件显示的参数
             */
            onClick(data, param) {
//                console.log('------------onClick--data: ' + JSON.stringify(data));
//                console.log('------------onClick--data: ' + JSON.stringify(param));
                this.$emit('close', data, param);
            },
            // 查看按钮点击事件
            optionClick() {
//                this.$emit('optionClick', this.data, this.option)
                let click = this.option.optionClick;
                // console.log('optionClick----: ' + (typeof click === 'function'));
                if (typeof click === 'function') {
                    click(this.data);
                }
            }
        }
    };
</script>
<style>
    .components-price-info .flex-align-items {
        display: flex;
        vertical-align: middle;
        font-size: 28upx;
        align-items: center;
        justify-content: space-between;
    }
    .components-price-info .default-view-price {
        height: 120upx;
        line-height: 120upx;
        width: 128upx;
        padding-left: 20upx;
        float: right;
        color: #077131;
        border-left: 1upx #e5e5e5 solid;
    }
    .components-price-info .padding-0-10 {
        padding: 0 10upx;
    }
    .components-price-info .icon {
        width: 36upx;
        height: 36upx;
        margin-right: 8upx;
    }
    .components-price-info .default-option-label {
        flex-shrink: 0;
    }

    .components-price-info .default-title-class {
        display: block;
        width: auto;
        height: 50upx;
        line-height: 50upx;
        text-align: left;
        box-sizing: border-box;
        font-size: 26upx !important;
        padding-left: 20upx;
        border-right: 1upx solid #e5e5e5;
        border-bottom: 1upx solid #e5e5e5;
        color: #1a1a1a;
        background-color: white;
    }

    .components-price-info .default-content-class {
        width: 100%;
        padding-bottom: 20upx;
    }

    .components-price-info .default-base-single {
        padding-top: 20upx;
        vertical-align: middle;
        display: flex;
        flex-shrink: 0;
        background-color: white;
    }

    .components-price-info .default-label-class {
        width: auto;
        flex-shrink: 0;
        box-sizing: border-box;
        font-size: 26upx !important;
        color: #4c4c4c;
        vertical-align: middle;
        text-align: left;
        display:flex;
        align-items:center;
    }

    .components-price-info .default-value-class {
        width: 100%;
        color: #4c4c4c;
        font-size: 26upx !important;
        vertical-align: middle;
        text-align: left;
    }
    .option-class-dot{
        width: 16upx;
        height: 16upx;
        border-radius: 100%;
        margin: 30upx -30upx;
        background-color: #ff0000;
    }
</style>